@import "../../styles/index.scss";
$checkbox-prefix-cls: "checkbox";
$radio-prefix-cls: "radio";
// checkbox size
$checkbox-size: 16px;
@mixin auto-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  width: $checkbox-size;
  height: $checkbox-size;
  border: 1px solid $black-15;
  box-sizing: border-box;
  transition: all 0.3s;
}

// checkbox-wrapper && radio-wrapper
.#{$checkbox-prefix-cls}-wrapper,
.#{$radio-prefix-cls}-wrapper {
  display: inline-flex;
  position: relative;
  align-items: center;
  vertical-align: middle;
  &.is-checked {
    &.is-enable {
      .#{$checkbox-prefix-cls}-inner {
        background-color: $blue;
        border-color: $blue;
      }
      .#{$radio-prefix-cls}-inner {
        background-color: #fff;
        border-color: $blue;
        &:after {
          background-color: $blue;
        }
      }
    }
    &.is-disabled {
      .#{$checkbox-prefix-cls}-inner,
      .#{$radio-prefix-cls}-inner {
        background-color: $black-10;
        border-color: $black-10;
      }
      .#{$radio-prefix-cls}-inner {
        &:after {
          background-color: $black-25;
        }
      }
    }
  }

  &.is-indeterminate {
    .#{$checkbox-prefix-cls}-inner {
      background-color: $blue;
      border-color: $blue;
      overflow: hidden;
      &:after {
        content: " ";
        border-bottom: 2px solid #fff;
        border-right: 0 solid $blue;
        width: $checkbox-size / 14 * 8;
        transform: translate(0, -25%);
      }
    }
  }

  .#{$checkbox-prefix-cls}-inner {
    @include auto-inner;
    border-radius: 2px;
    &:after {
      display: inline-block;
      content: " ";
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      width: $checkbox-size / 14 * 5;
      height: $checkbox-size / 14 * 8;
      transform: rotate(45deg) scale(1);
      box-sizing: border-box;
      margin-top: -$checkbox-size / 5;
      vertical-align: middle;
    }
  }
  .#{$radio-prefix-cls}-inner {
    @include auto-inner;
    border-radius: 100%;
    &:after {
      display: inline-block;
      content: " ";
      width: $checkbox-size / 2;
      height: $checkbox-size / 2;
      border-radius: 100%;
      background-color: #fff;
    }
  }
  .#{$checkbox-prefix-cls}-input,
  .#{$radio-prefix-cls}-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    margin: 0;
    width: $checkbox-size;
    height: $checkbox-size;
    box-sizing: border-box;
    z-index: 2;
    cursor: pointer;
    &:disabled {
      cursor: not-allowed;
    }
  }

  // checkbox-label && radio-label
  .#{$checkbox-prefix-cls}-label,
  .#{$radio-prefix-cls}-label {
    display: inline-flex;
    align-items: center;
    user-select: none;
    vertical-align: middle;
    .is-enable {
      cursor: pointer;
      &:hover {
        .#{$checkbox-prefix-cls}-inner,
        .#{$radio-prefix-cls}-inner {
          border-color: $blue;
          @include normalShadow();
        }
      }
    }
    &-content {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      flex: 1;
      padding-left: 5px;
      box-sizing: border-box;
    }
  }

  &.is-enable {
    .#{$checkbox-prefix-cls}-label,
    .#{$radio-prefix-cls}-label {
      cursor: pointer;
      &:hover {
        .#{$checkbox-prefix-cls}-inner,
        .#{$radio-prefix-cls}-inner {
          border-color: $blue;
          @include normalShadow();
        }
      }
    }
  }

  &.is-disabled {
    cursor: not-allowed;
    & > * {
      pointer-events: none;
    }
    .#{$checkbox-prefix-cls}-label,
    .#{$radio-prefix-cls}-label {
      .#{$checkbox-prefix-cls}-inner,
      .#{$radio-prefix-cls}-inner {
        border-color: $black-10;
      }
      .#{$checkbox-prefix-cls}-label-content,
      .#{$radio-prefix-cls}-label-content {
        color: $black-45;
      }
    }
  }

  .#{$checkbox-prefix-cls}-extra,
  .#{$radio-prefix-cls}-extra {
    white-space: nowrap;
  }
  &:not(:last-child) {
    padding-right: 10px;
  }
}

.#{$checkbox-prefix-cls}-group,
.#{$radio-prefix-cls}-group {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
}

.#{$checkbox-prefix-cls}-group-vertical,
.#{$radio-prefix-cls}-group-vertical {
  .#{$checkbox-prefix-cls}-wrapper,
  .#{$radio-prefix-cls}-wrapper {
    display: flex;
    align-items: center;
    padding-right: 0;
    &:not(:last-child) {
      padding-bottom: 10px;
    }
    .#{$checkbox-prefix-cls}-label,
    .#{$radio-prefix-cls}-label {
      padding-right: 0;
    }
  }
}
